<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>modal组件</title>
    <style>
        p,
        h4 {
            margin: 0;
        }
        
        .modal {
            width: 500px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
            margin-bottom: 20px;
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .modal-content div {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        
        .btn {
            padding: 5px 15px;
            border: none;
            outline: none;
        }
        
        .blue {
            color: #fff;
            background-color: #39f;
            border-color: #39f;
        }
        
        .red {
            color: #fff;
            background-color: #f00;
            border-color: #f00;
        }
        
        .green {
            color: #fff;
            background-color: green;
            border-color: green;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 注意1:这里的参数要用烤串形式,不能用驼峰 -->
        <tp-modal modal-title="提醒标题" @on-ok="onOk"></tp-modal>

        <tp-modal>
            <template slot="modal-content">
                <ul>
                    <li v-for="(item,index) of list" :key="index">{{item}}</li>
                </ul>
            </template>

            <template slot="modal-footer">
                <input class="btn blue" type="button" value="确定" @click="okClick" />
                <input class="btn red" type="button" value="重置" @click="resetClick" />
                <input class="btn green" type="button" value="返回" @click="backClick" />
            </template>
        </tp-modal>

        <tp-modal @on-cancel="onCancel"></tp-modal>
    </div>
    <script>
        Vue.component('tp-modal', {
            props: {
                modalTitle: {
                    type: String,
                    default: '这是一个模态框'
                }
            },
            template: `
                <div class="modal">
                    <div class="modal-header">
                        <h4>{{modalTitle}}</h4>
                    </div>
                    <div class="modal-content">
                        <slot name="modal-content">
                            <div>在这里添加内容</div>
                        </slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="modal-footer">
                            <input class="btn blue" type="button" value="确定" @click="btnOk" />
                            <input class="btn" type="button" value="取消" @click="btnCancel" />
                        </slot>
                    </div>
                </div>
            `,
            methods: {
                btnOk() {
                    alert('您点击了确定')
                    this.$emit('on-ok')
                },
                btnCancel() {
                    alert('您点击了取消')
                    this.$emit('on-cancel')
                }
            }
        })

        // 注意2:ES6的...方法是这样写的
        var tlist = [...
            '妙味课堂'
        ]
        new Vue({
            el: '#app',
            data: {
                list: tlist
            },
            methods: {
                onOk() {
                    alert('改变一个div样式')
                },
                onCancel() {
                    alert('取消去干别的事情')
                },
                okClick() {
                    alert('确定按钮')
                },
                resetClick() {
                    alert('重置按钮')
                },
                backClick() {
                    alert('返回按钮')
                }
            }
        })
    </script>
</body>

</html>